<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-swipe-cell>
      <!-- <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
  /> -->

      <!-- 房子列表 -->
      <div class="houseList">
        <!-- 图片 -->
        <div class="pic">
          <img
            src="http://liufusong.top:8080/uploads/upload_39daa514e0838aa7b89e51b9152c6407.png"
            alt=""
          />
        </div>
        <!-- 文字 -->
        <div class="text">
          <!-- 标题 -->
          <div class="title">哈哈哈</div>
          <!-- 详细信息 -->
          <p>一室一厅</p>
          <span>进地铁</span>
          <p class="price"><span>213</span>元/月</p>
        </div>

      </div>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: 'layout-page',
  data() {
    return {
      value: '',
    }
  },
  methods: {
    onSearch() {},
  },
}
</script>

<style lang="less" scoped>
.houseList {
  display: flex;
  padding: 10px 12px;
  width: 100%;
  height: 105px;
  background-color: #fff;
  border-bottom: solid 1px #eeeeee;
  .pic {
    // flex: 25%;
    // width: 25%;
    height: 100px;
    width: 135px;
    background-color: pink;
    img {
      width: 80%;
    }
  }
  .text {
    margin-left: 10px;
    .title {
      margin: 0;
      font-size: 15px;
      color: #394043;
    }
    p {
      font-size: 12px;
      color: #afb2b3;
    }
    span {
      color: #39becd;
      background: #e1f5f8;
    }
    .price {
      font-size: 12px;
      color: #fa5741;
    }
  }
}
</style>
